<template>
  <div class="main">
    <div class="first">
      <div class="bigtitle">{{this.region}}回收数据平台
        <Icon class="icon"
              type="ios-pin"
              color="red"
              @click='showCreateModal' />
      </div>
      <div class="time">
        <div id="time-day">{{this.timeday}}</div>
        <div id="time-hour">{{this.timehour }}</div>
      </div>
    </div>
    <div class="second">
      <!-- 第一列 -->
      <div class="second-left">
        <div class="left-first">
          <div class="lf-list">
            <div class="lf-title">参与率</div>
            <div class="lf-number">{{this.topnumber.areaRate}}%</div>
          </div>
          <div class="lf-list">
            <div class="lf-title">本月户均</div>
            <div class="lf-number">{{this.topnumber.userAverageWeightToMonth}}kg</div>
          </div>
          <div class="lf-list">
            <div class="lf-title">今日户均</div>
            <div class="lf-number">{{this.topnumber.userAverageWeightToday}}kg</div>
          </div>

        </div>
        <div id="left-second">
          <monthRecycling :monthRecycling='this.monthRecycling'></monthRecycling>
        </div>
        <div id="left-third">
          <yearRecycling :yearRecycling='this.yearRecycling'></yearRecycling>
        </div>
      </div>
      <!-- 第二列 -->
      <div class="second-center">
        <div class="center-first">
          <div class="cf-list">
            <div class="cf-title">覆盖户数</div>
            <div class="cf-number">{{this.topnumber.userNum}}户</div>
          </div>
          <div class="cf-list">
            <div class="cf-title">今日回收量</div>
            <div class="cf-number">{{this.topnumber.weightToday}}KG</div>
          </div>
          <div class="cf-list">
            <div class="cf-title">覆盖服务站</div>
            <div class="cf-number">{{this.topnumber.comminNum}}个</div>
          </div>
        </div>
        <div id="center-second">
          <bmap :city="this.citylist"></bmap>
        </div>
        <div class="center-third">
          <scroll :scrolldata='this.scrolldata'></scroll>
        </div>
      </div>
      <!-- 第三列 -->
      <div class="second-right">
        <div class="r-biao">
          <recyclingRanking :recyclingRanking='this.recyclingRanking'></recyclingRanking>
        </div>
        <div class="r-biao">
          <recyclingCategory :recyclingCategory='this.recyclingCategory'></recyclingCategory>
        </div>
        <div class="r-biao">
          <monthIntegral :monthIntegral='this.monthIntegral'></monthIntegral>
        </div>
      </div>
    </div>
    <div class="third">
      <div class="last-lists">
        <div class="seven-title">
          累计回收重量
        </div>
        <div class="seven-number">
          {{this.downnumber.weightHistory}}kg
        </div>
      </div>
      <div class="last-lists">
        <div class="seven-title">
          全年回收重量
        </div>
        <div class="seven-number">
          {{this.downnumber.weightToYear}}kg
        </div>
      </div>
      <div class="last-lists">
        <div class="seven-title">
          本月回收重量
        </div>
        <div class="seven-number">
          {{this.downnumber.weightToMonth}}kg
        </div>
      </div>
      <div class="last-lists">
        <div class="seven-title">
          今日环保积分发放
        </div>
        <div class="seven-number">
          {{this.downnumber.scoreToday}}积分
        </div>
      </div>
      <div class="last-lists">
        <div class="seven-title">
          今日环保积分兑换
        </div>
        <div class="seven-number">
          {{this.downnumber.scoreSaleToday}}积分
        </div>
      </div>
      <div class="last-lists">
        <div class="seven-title">
          今日回收订单
        </div>
        <div class="seven-number">
          {{this.downnumber.orderNumToday}}单
        </div>
      </div>
      <div class="last-lists">
        <div class="seven-title">
          本月领袋个数
        </div>
        <div class="seven-number">
          {{this.downnumber.garbageNumToMonth}}个
        </div>
      </div>
    </div>
    <Modal v-model="modal.lntegralSet.thisShow"
           :loading="modal.lntegralSet.loading"
           :mask-closable="false"
           :title="modal.lntegralSet.title"
           @on-ok="chooseregion"
           width='800'>
      <Form :model="modal.lntegralSet.formData"
            :label-width="150"
            ref="newUpData"
            :rules="modal.lntegralSet.rules">
        <Row>
          <Col>
          <FormItem label="设备所在区域"
                    prop="softPath">
            <queryData @ProvinceData="formdataValue"
                       ref="hadregion"
                       style="width: 535px"></queryData>
          </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script>
import queryData from '@/view/test/cityTestZj.vue'
// import cityFormApi from '@/api/base_sys/gcDispenser.js'
import monthRecycling from './components/monthRecycling.vue'
import yearRecycling from './components/yearRecycling.vue'
import recyclingRanking from './components/recyclingRanking.vue'
import recyclingCategory from './components/recyclingCategory.vue'
import monthIntegral from './components/monthIntegral.vue'
import bmap from './components/bmap.vue'
import scroll from './components/scroll.vue'
import DataScreenApi from '@/api/RecordsCenter/DataScreen.js'
import { Message } from 'iview'
// import backimg from '../../static/backimg.png'
export default {
  components: {
    queryData,
    monthRecycling,
    yearRecycling,
    monthIntegral,
    recyclingRanking,
    recyclingCategory,
    scroll,
    bmap
  },
  name: 'DataScreen',
  data () {
    return {
      region: '',
      time: '',
      timeday: '',
      timehour: '',
      citylist: {},
      topnumber: {},
      monthRecycling: {}, // 上月回收量
      yearRecycling: {}, // 本年回收量
      recyclingRanking: {}, // 回收小区排名
      recyclingCategory: {}, // 回收品类占比
      monthIntegral: {}, // 上月环保积分
      downnumber: {},
      scrolldata: {},
      modal: {
        lntegralSet: {
          thisShow: false,
          loading: true,
          title: '区域选择',
          rules: {},
          formData: {
            code: '',
            provid: '',
            cityid: '',
            distid: '',
            strtid: '',
            commid: '',
            comminid: ''
          }
        }
      }
    }
  },
  methods: {
    getdata () {
      this.gettopnumber()
      this.getmonthRecycling()
      this.getyearRecycling()
      this.getrecyclingRanking()
      this.getrecyclingCategory()
      this.getmonthIntegral()
      this.getdownnumber()
      this.getscrolldata()
    },
    gettopnumber () {
      const that = this
      DataScreenApi.gettopnumber(that.modal.lntegralSet.formData)
        .then((res) => {
          this.topnumber = res.data
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    getmonthRecycling () {
      const that = this
      DataScreenApi.getmonthRecycling(that.modal.lntegralSet.formData)
        .then((res) => {
          that.monthRecycling = res.data
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    getyearRecycling () {
      const that = this
      DataScreenApi.getyearRecycling(that.modal.lntegralSet.formData)
        .then((res) => {
          that.yearRecycling = res.data
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    getrecyclingRanking () {
      const that = this
      DataScreenApi.getrecyclingRanking(that.modal.lntegralSet.formData)
        .then((res) => {
          that.recyclingRanking = res.data
          // console.log(res)
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    getrecyclingCategory () {
      const that = this
      DataScreenApi.getrecyclingCategory(that.modal.lntegralSet.formData)
        .then((res) => {
          that.recyclingCategory = res.data
        })
        .catch((error) => {
          Message.error(error)
        })
    },

    getmonthIntegral () {
      const that = this
      DataScreenApi.getmonthIntegral(that.modal.lntegralSet.formData)
        .then((res) => {
          that.monthIntegral = res.data
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    getdownnumber () {
      const that = this
      DataScreenApi.getdownnumber(that.modal.lntegralSet.formData)
        .then((res) => {
          this.downnumber = res.data
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    getscrolldata () {
      const that = this
      DataScreenApi.getscrolldata(that.modal.lntegralSet.formData)
        .then((res) => {
          this.scrolldata = res.data
        })
        .catch((error) => {
          Message.error(error)
        })
    },

    chooseregion () {
      const list = this.$refs.hadregion.selectedData
      this.citylist = list
      if (list[list.length - 1] !== undefined) {
        this.region = list[list.length - 1].label
      } else {
        this.region = ''
      }
      this.modal.lntegralSet.thisShow = false
    },

    showCreateModal () {
      this.modal.lntegralSet.formData = {}
      this.modal.lntegralSet.thisShow = true
    },

    date () {
      var timestamp = new Date().getTime()
      var time = this.havetime(timestamp)
      // document.getElementById('time-day').innerHTML=time.split(' ')[0]
      // document.getElementById('time-hour').innerHTML=time.split(' ')[1]
      this.timeday = time.split(' ')[0]
      this.timehour = time.split(' ')[1]
    },
    havetime (unixtime) {
      var date = new Date(unixtime)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var minute = date.getMinutes()
      var second = date.getSeconds()
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      // return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;//年月日时分秒
      return (
        y + '年' + m + '月' + d + '日' + ' ' + h + ':' + minute + ':' + second
      )
    },
    formdataValue (formdata) {
      this.modal.lntegralSet.formData.provid = formdata.provid
      this.modal.lntegralSet.formData.commid = formdata.commid
      this.modal.lntegralSet.formData.cityid = formdata.cityid
      this.modal.lntegralSet.formData.comminid = formdata.comminid
      this.modal.lntegralSet.formData.distid = formdata.distid
      this.modal.lntegralSet.formData.strtid = formdata.strt
    }
  },
  watch: {
    citylist (newval, oldval) {
      this.getdata()
    }
  },
  mounted () {
    this.timer = setInterval(this.date, 1000)
  },

  created () {
    this.getdata()
  }
}
</script>

<style scoped>
.main {
  min-width: 1000px;
  min-height: 800px;
  width: 100%;
  height: 100%;
  background-image: url('../../static/backimg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.first {
  width: 100%;
  height: 8%;
  text-align: center;
}
.bigtitle {
  font-size: 30px;
  font-weight: 700;
  color: #3fe3ec;
}
.icon {
  cursor: pointer;
}
.time {
  display: flex;
  flex-direction: row;
  float: right;
  font-size: 17px;
  color: #ffffff;
}
/* ........................ */
.second {
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.second-left {
  width: 24%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.left-first {
  width: 100%;
  height: 10%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(30, 144, 255, 0.4);
  border-radius: 5px;
}
.lf-list {
  width: 33%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}
.lf-title {
}
.lf-number {
  font-size: 20px;
}
#left-second {
  width: 100%;
  height: 42%;
  background-color: rgba(30, 144, 255, 0.3);
}
#left-third {
  width: 100%;
  height: 42%;
  background-color: rgba(30, 144, 255, 0.3);
}
.second-center {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.center-first {
  width: 100%;
  height: 10%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
}
.cf-list {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  background-color: rgba(30, 144, 255, 0.4);
  border-radius: 5px;
}
.cf-title {
}
.cf-number {
  font-size: 20px;
}
#center-second {
  width: 100%;
  height: 65%;
}
.center-third {
  width: 100%;
  height: 22%;
  background-color: rgba(30, 144, 255, 0.3);
  color: #ffffff;
}
.second-right {
  width: 24%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.r-biao {
  width: 100%;
  height: 32.5%;
  background-color: rgba(30, 144, 255, 0.3);
}
/* ............................... */
.third {
  width: 100%;
  height: 12%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.last-lists {
  width: 14%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(30, 144, 255, 0.4);
  border-radius: 5px;
  color: #ffffff;
}
.seven-title {
  width: 90%;
  height: 40%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
}
.seven-number {
  width: 70%;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 20px;
  font-weight: 700;
}
</style>
